<template>
  <el-row :gutter="3">

    <!-- 搜索 -->
    <el-col :span="7">
        <el-input placeholder="请输入内容" 
        v-model="queryInfo.query"
        :clearable="true"
        @clear="inputContentClear"></el-input>
    </el-col>

    <!-- 搜索按钮 -->
    <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" @click="search"></el-button>
    </el-col>

    <!-- 按钮 -->
    <el-col :span="2">
        <el-button type="primary" @click="openDialog" v-if="isShowRightBtn">{{ btnTxt }}</el-button>
    </el-col>

  </el-row>
</template>

<script>
export default {
  props: {
    btnTxt: String,
    queryInfo: Object,
    inputContentClearEmitName: String,
    searchEmitName: String,
    openDialogEmitName: String,
    isShowRightBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    inputContentClear() { // 清空input触发函数
      this.$bus.$emit(this.inputContentClearEmitName); 
    },
    search() { // 搜索按钮触发
      this.$bus.$emit(this.searchEmitName);
    }, 
    openDialog() { // 打开dialog
      this.$bus.$emit(this.openDialogEmitName);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>